<template>
  <div class="main" style="margin-top: -2px">
    <div class="det_top_box">
      <div class="detail_header">
        <div class="det_top">
          <div>(编号：{{ data.RUNo }}){{ data.OrgName }}</div>
          <div>
            <img
              class="dep_top_img mr-15"
              src="@/assets/Images/AppIcon/icon_qr_code.png"
              alt=""
              @click="goQRCode"
            />
            <eagle-uploader :after-read="afterRead">
              <!--跳转拍照-->
              <img
                class="dep_top_img"
                src="@/assets/Images/AppIcon/icon_pictures.png"
                alt=""
              />
            </eagle-uploader>
          </div>
        </div>
        <eagle-row class="det_name">{{ data.RiskUnitName }}</eagle-row>
        <eagle-row class="det_location">(风险位置)</eagle-row>
        <eagle-row class="det_accident_div">
          <span class="det_accident"> 事故类型: {{ data.AccidentName }}</span>
        </eagle-row>
        <eagle-row class="mb-10 riskLevel">
          <eagle-col span="12">
            <span class="mr-10">固有风险:</span>
            <span
              class="riskLevelnone"
              v-bind:class="{
                riskLevel1: data.EvaluationValue == 'A/1级',
                riskLevel2: data.EvaluationValue == 'B/2级',
                riskLevel3: data.EvaluationValue == 'C/3级',
                riskLevel5:
                  data.EvaluationValue == 'E/5级' ||
                  data.EvaluationValue == 'D/4级',
              }"
              >{{ getRiskLeveText(data.EvaluationValue) }}</span
            >
          </eagle-col>
          <eagle-col span="12">
            <span class="mr-10">现状风险</span>
            <span
              class="riskLevelnone"
              v-bind:class="{
                riskLevel1: data.EvaluationResultValue == 'A/1级',
                riskLevel2: data.EvaluationResultValue == 'B/2级',
                riskLevel3: data.EvaluationResultValue == 'C/3级',
                riskLevel5:
                  data.EvaluationResultValue == 'E/5级' ||
                  data.EvaluationResultValue == 'D/4级',
              }"
              >{{ getRiskLeveText(data.EvaluationResultValue) }}</span
            >
          </eagle-col>
        </eagle-row>
        <eagle-row class="mb-10">
          <eagle-col span="12">
            <span class="mr-10">班 组</span>
            <span>{{ data.TeamName }}</span>
          </eagle-col>
          <eagle-col span="12">
            <span class="mr-10">岗 位</span>
            <span>{{ data.OrgPostName }}</span>
          </eagle-col>
        </eagle-row>
        <eagle-row class="mb-10">
          <eagle-col span="12">
            <span class="mr-10">修改人</span>
            <span>{{ data.EditChnName }}</span>
          </eagle-col>
          <eagle-col span="12">
            <span class="mr-10">修改时间</span>
            <span>{{ data.EditDate }}</span>
          </eagle-col>
        </eagle-row>
      </div>
    </div>
    <eagle-tabs
      class="van-tabs"
      :offset-top="43"
      v-model="active"
      sticky
      scrollspy
      background="#e8f1f8"
      color="rgb(34, 170, 148)"
      title-active-color="rgb(34, 170, 148)"
    >
      <eagle-tab title="人员信息">
        <div class="det_tab">
          <div class="det_tab_item">
            <eagle-tag class="mb-20" type="primary" size="large" mark
              >人员信息</eagle-tag
            >
            <div class="det_tab_item_text">
              <eagle-row class="mb-10">
                <eagle-col span="9">
                  <img
                    class="user-imgs"
                    src="@/assets/Images/AppIcon/icon_account.png"
                    alt=""
                  />
                  <span class="user-name">{{this.ListManagerTitle}}</span>
                </eagle-col>
                <eagle-col span="14" offset="1" v-if="platfrom!='SYST'">
                  <div v-if="data.ListManager">
                    <div
                      class="tab-item-r mb-10"
                      v-for="(item, index6) in data.ListManager"
                      :key="index6"
                    >
                      <span>{{ item.Name }}</span>
                      <span class="look-detail"
                        ><span class="mr-5" @click="goStaffInfo(item)"
                          >详情</span
                        ><van-icon size="12" color="#1989fa" name="arrow"
                      /></span>
                    </div>
                  </div>
                  <div v-else class="none">暂无信息</div>
                </eagle-col>
                <eagle-col span="14" offset="1" v-if="platfrom=='SYST'">
                  <div v-if="data.ListDirector">
                    <div
                      class="tab-item-r mb-10"
                      v-for="(item, index6) in data.ListDirector"
                      :key="index6"
                    >
                      <span>{{ item.Name }}</span>
                      <span class="look-detail"
                        ><span class="mr-5" @click="goStaffInfo(item)"
                          >详情</span
                        ><van-icon size="12" color="#1989fa" name="arrow"
                      /></span>
                    </div>
                  </div>
                  <div v-else class="none">暂无信息</div>
                </eagle-col>
              </eagle-row>
              <eagle-row class="mb-10" v-if="platfrom!='SYST'">
                <eagle-col span="9">
                  <img
                    class="user-imgs"
                    src="@/assets/Images/AppIcon/icon_account.png"
                    alt=""
                  />
                  <span class="user-name">{{this.ListLeaderTitle}}</span>
                </eagle-col>
                <eagle-col span="14" offset="1">
                  <div v-if="data.ListLeader">
                    <div
                      class="tab-item-r mb-10"
                      v-for="(item, index7) in data.ListLeader"
                      :key="index7"
                    >
                      <span>{{ item.Name }}</span>
                      <span class="look-detail"
                        ><span class="mr-5" @click="goStaffInfo(item)"
                          >详情</span
                        ><van-icon size="12" color="#1989fa" name="arrow"
                      /></span>
                    </div>
                  </div>
                  <div v-else class="none">暂无信息</div>
                </eagle-col>
              </eagle-row>
              <eagle-row class="mb-10"  v-if="platfrom=='SYST'">
                <eagle-col span="9">
                  <img
                    class="user-imgs"
                    src="@/assets/Images/AppIcon/icon_account.png"
                    alt=""
                  />
                  <span class="user-name">{{this.ListLeaderTitle}}</span>
                </eagle-col>
                <eagle-col span="14" offset="1">
                  <div v-if="data.ListManager">
                    <div
                      class="tab-item-r mb-10"
                      v-for="(item, index7) in data.ListManager"
                      :key="index7"
                    >
                      <span>{{ item.Name }}</span>
                      <span class="look-detail"
                        ><span class="mr-5" @click="goStaffInfo(item)"
                          >详情</span
                        ><van-icon size="12" color="#1989fa" name="arrow"
                      /></span>
                    </div>
                  </div>
                  <div v-else class="none">暂无信息</div>
                </eagle-col>
              </eagle-row>
              <eagle-row v-if="platfrom!='SYST'">
                <eagle-col span="9">
                  <img
                    class="user-imgs"
                    src="@/assets/Images/AppIcon/icon_account.png"
                    alt=""
                  />
                  <span class="user-name">{{this.ListTechDirector}}</span>
                </eagle-col>
                <eagle-col span="14" offset="1">
                  <div v-if="data.ListDirector">
                    <div
                      class="tab-item-r mb-10"
                      v-for="(item, index8) in data.ListDirector"
                      :key="index8"
                    >
                      <span>{{ item.Name }}</span>
                      <span class="look-detail"
                        ><span class="mr-5" @click="goStaffInfo(item)"
                          >详情</span
                        ><van-icon size="12" color="#1989fa" name="arrow"
                      /></span>
                    </div>
                  </div>
                  <div v-else class="none">暂无信息</div>
                </eagle-col>
              </eagle-row>
              <eagle-row v-if="platfrom=='SYST'">
                <eagle-col span="9">
                  <img
                    class="user-imgs"
                    src="@/assets/Images/AppIcon/icon_account.png"
                    alt=""
                  />
                  <span class="user-name">{{this.ListTechDirectorTitle}}</span>
                </eagle-col>
                <eagle-col span="14" offset="1">
                  <div v-if="data.ListLeader">
                    <div
                      class="tab-item-r mb-10"
                      v-for="(item, index8) in data.ListLeader"
                      :key="index8"
                    >
                      <span>{{ item.Name }}</span>
                      <span class="look-detail"
                        ><span class="mr-5" @click="goStaffInfo(item)"
                          >详情</span
                        ><van-icon size="12" color="#1989fa" name="arrow"
                      /></span>
                    </div>
                  </div>
                  <div v-else class="none">暂无信息</div>
                </eagle-col>
              </eagle-row>
            </div>
          </div>
        </div>
      </eagle-tab>
      <eagle-tab title="风险告知信息">
        <div class="det_tab">
          <div class="det_tab_item">
            <eagle-tag class="mb-20" type="primary" size="large" mark
              >风险告知信息</eagle-tag
            >
            <div class="det_tab_item_text">
              <div class="none" v-if="!data.ListRelationRP">暂无信息</div>

              <div
                class="fenxian mb-10"
                v-else
                v-for="(item, index9) in data.ListRelationRP"
                :key="index9"
              >
                <div class="mb-20 f15 fb">风险点：{{ item.RiskPointName }}</div>
                <div class="RiskPointName">
                  <img
                    src="@/assets/Images/AppIcon/icon_detail_riskunit_identification.png"
                    alt=""
                  /><span>风险辨识记录</span>
                </div>
                <div
                  class="att-name"
                  v-for="(item1, index11) in item.ListRPIdentify"
                  :key="index11"
                >
                  <div @click="goFile(item1.AttCode)">
                    {{ item1.AttName }}{{ item1.AttExt ? item1.AttExt : "" }}
                  </div>
                </div>
                <div class="RiskPointName mt-10">
                  <img
                    src="@/assets/Images/AppIcon/icon_detail_riskunit_indentify.png"
                    alt=""
                  /><span>风险告知卡</span>
                </div>
                <div
                  v-if="!item.ListNotifyCard && item.ListNotifyCard.length < 1"
                  class="none"
                >
                  暂无信息
                </div>

                <div
                  class="att-name"
                  v-else
                  v-for="(item1, index12) in item.ListNotifyCard"
                  :key="index12"
                >
                  <div @click="goFile(item1.AttCode)">
                    {{ item1.AttName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </eagle-tab>
      <eagle-tab title="隐患排查">
        <div class="det_tab">
          <div class="det_tab_item">
            <eagle-tag class="mb-20" type="primary" size="large" mark
              >隐患排查</eagle-tag
            >
            <div class="det_tab_item_text">
              <div class="text_box">
                <div class="text_top f15 fb">检查计划</div>

                <div v-if="data.ListCheckPlan && data.ListCheckPlan.length > 0">
                  <div
                    v-for="(item1, index1) in data.ListCheckPlan"
                    :key="index1"
                  >
                    <div class="att-name">
                      <span class="fr color-gray2">{{
                        item1.CheckFrequencyName
                      }}</span>
                      {{ item1.CheckPlanName }}
                    </div>
                  </div>
                </div>
                <div class="none" v-else>暂无信息</div>
              </div>
              <div class="text_box">
                <div class="text_top f15 fb">实施检查</div>
                <div class="text_img">
                  <div class="img_item" @click="goDangerPhoto()">
                    <img
                      src="@/assets/Images/AppIcon/icon_danger_main_checkplan.png"
                      alt=""
                    />
                    <div>发起检查</div>
                  </div>
                  <div class="img_item" @click="goDangerTemplate()">
                    <img
                      src="@/assets/Images/AppIcon/icon_danger_main_checktask.png"
                      alt=""
                    />
                    <div>检查表检查</div>
                  </div>
                  <div class="img_item" @click="goAreaPlanTaskPage()">
                    <img
                      src="@/assets/Images/AppIcon/icon_danger_main_checkdetail.png"
                      alt=""
                    />
                    <div>计划任务</div>
                  </div>
                </div>
              </div>
              <div class="text_box">
                <div class="text_top f15 fb">隐患统计</div>
                <div class="text_history">
                  <img
                    style="width: 15px; height: 15px; margin-right: 5px"
                    src="@/assets/Images/AppIcon/icon_account.png"
                    alt=""
                  />
                  <div>历史检查人</div>
                </div>
                <div
                  class="text_member"
                  v-if="
                    data.DangerCheck.ListCheckUser &&
                    data.DangerCheck.ListCheckUser.length > 0
                  "
                >
                  <span
                    v-for="(item, index10) in data.DangerCheck.ListCheckUser"
                    :key="index10"
                  >
                    <span
                      style="margin-right: 10px"
                      @click="goStaffInfo(item)"
                      >{{ item.Name }}</span
                    >
                  </span>
                </div>
                <div class="none mb-10" v-else>没有任何检查人员信息.</div>
                <div class="mt-20">
                  <div class="text_total_img mt-10">
                    <div
                      class="img_item"
                      @click="goAreaDetailPageData('MonthRecord')"
                    >
                      <div class="img_item_top">
                        <img
                          src="@/assets/Images/AppIcon/icon_detail_riskunit_check.png"
                          alt=""
                        />
                        <div>本月检查</div>
                      </div>
                      <div>{{ data.DangerCheck["MonthDangerCnt"] }}个</div>
                    </div>
                    <div
                      class="img_item"
                      @click="goAreaDetailPageData('YearRecord')"
                    >
                      <div class="img_item_top">
                        <img
                          src="@/assets/Images/AppIcon/icon_detail_riskunit_check.png"
                          alt=""
                        />
                        <div>年度检查</div>
                      </div>

                      <div>{{ data.DangerCheck.YearDangerCnt }}个</div>
                    </div>
                    <div
                      class="img_item"
                      @click="goAreaDetailPageData('TotalRecord')"
                    >
                      <div class="img_item_top">
                        <img
                          src="@/assets/Images/AppIcon/icon_detail_riskunit_danger.png"
                          alt=""
                        />
                        <div>合计隐患数</div>
                      </div>
                      <div>{{ data.DangerCheck.TotalDangerCnt }}个</div>
                    </div>
                  </div>
                  <!-- <div id="echarts1" style="width: 100%; height: 300px"></div> -->
                </div>
              </div>
              <div class="text_box">
                <div class="text_top">
                  <span class="f15 fb">隐患排查记录</span>
                  <span class="top_link" @click="goInspectRecord">更多</span>
                </div>
                <div
                  class="text_record_list"
                  v-if="data.ListCheckRecord && data.ListCheckRecord.length"
                >
                  <div class="list_row">
                    <div>检查人</div>
                    <div class="row_center">隐患数/整改数</div>
                    <div class="row_right">日期</div>
                  </div>
                  <div
                    class="list_row"
                    v-for="(item, index14) in data.ListCheckRecord"
                    :key="index14"
                    @click="goAreaDetailPageData('', item.CTCode)"
                  >
                    <div>{{ item.CheckNames }}</div>
                    <div class="row_center">
                      {{ item.HiddenDangerCnt }}/{{ item.CorrectivedCnt }}
                    </div>
                    <div class="row_right">
                      {{ item.StartDate | formatMouthTime }}
                    </div>
                  </div>
                </div>
                <div class="none" v-else>暂无信息</div>
              </div>
            </div>
          </div>
        </div>
      </eagle-tab>
      <eagle-tab title="操作规程">
        <div class="det_tab">
          <div class="det_tab_item">
            <eagle-tag class="mb-20" type="primary" size="large" mark
              >操作规程</eagle-tag
            >
            <div class="det_tab_item_text">
              <div v-if="data.ListOpRegulation && data.ListOpRegulation.length">
                <div
                  v-for="item in data.ListOpRegulation"
                  :key="item.AttName"
                  class="risk-unit-name mb-10"
                  @click="goAttach(item.AttCode)"
                >
                  <img
                    src="@/assets/Images/AppIcon/icon_detail_riskunit_regulation.png"
                    alt=""
                  /><span>{{ item.AttName }}</span>
                </div>
              </div>
              <div v-else class="none">暂无信息</div>
            </div>
          </div>
        </div>
      </eagle-tab>
      <eagle-tab title="应急处置卡">
        <div class="det_tab">
          <div class="det_tab_item">
            <van-tag class="mb-20" type="primary" size="large" mark
              >应急处置卡</van-tag
            >
            <div class="det_tab_item_text">
              <div v-if="data.ListSDPlan">
                <div
                  v-for="item in data.ListSDPlan"
                  :key="item.AttName"
                  class="risk-unit-name mb-10"
                >
                  <img
                    src="@/assets/Images/AppIcon/icon_detail_riskunit_notifycard.png"
                    alt=""
                  /><span @click="goPlanSiteDisposalPlan(item.AttCode)">{{
                    item.AttName
                  }}</span>
                </div>
              </div>
              <div v-else class="none">暂无信息</div>
            </div>
          </div>
        </div>
      </eagle-tab>
      <eagle-tab title="设备信息">
        <div class="det_tab">
          <div class="det_tab_item">
            <eagle-tag class="mb-20" type="primary" size="large" mark
              >设备信息</eagle-tag
            >
            <div class="det_tab_item_text">
              <div v-if="data.ListEquipment">
                <div
                  class="risk-unit-name mb-10"
                  v-for="(item, index3) in data.ListEquipment"
                  :key="index3"
                  @click="goEquDetail(item)"
                >
                  <img
                    src="@/assets/Images/AppIcon/icon_detail_riskunit_equipment.png"
                    alt=""
                  /><span>{{ item.Name }}</span>
                </div>
              </div>
              <div v-else class="none">暂无信息</div>
            </div>
          </div>
        </div>
      </eagle-tab>
      <eagle-tab title="化学品信息">
        <div class="det_tab">
          <div class="det_tab_item">
            <eagle-tag class="mb-20" type="primary" size="large" mark
              >化学品信息</eagle-tag
            >
            <div class="det_tab_item_text">
              <div v-if="data.ListChem">
                <div
                  class="risk-unit-name mb-10"
                  v-for="(item, index4) in data.ListChem"
                  :key="index4"
                  @click="goChemDetail(item)"
                >
                  <img
                    src="@/assets/Images/AppIcon/icon_detail_riskunit_chem.png"
                    alt=""
                  /><span>{{ item.Name }}</span>
                </div>
              </div>
              <div v-else class="none">暂无信息</div>
            </div>
          </div>
        </div>
      </eagle-tab>
      <eagle-tab title="事故记录">
        <div class="det_tab">
          <div class="det_tab_item">
            <eagle-tag class="mb-20" type="primary" size="large" mark
              >事故记录</eagle-tag
            >
            <div class="det_tab_item_text">
              <div v-if="data.ListAccident">
                <div
                  class="risk-unit-name mb-10"
                  v-for="(item, index5) in data.ListAccident"
                  :key="index5"
                >
                  <img
                    src="@/assets/Images/AppIcon/icon_detail_riskunit_accident.png"
                    alt=""
                  /><span>{{ item.AttName }}</span>
                </div>
              </div>
              <div v-else class="none">暂无信息</div>
            </div>
          </div>
        </div>
      </eagle-tab>
    </eagle-tabs>
  </div>
</template>

<script>
import { getDate, getDateTime } from "@/utils/getDate";
import { upload } from "@/api/common";

import { ImagePreview } from "vant";

export default {
  components: {},
  data() {
    return {
      active: 0,
      baseUrl: process.env.VUE_APP_BASE_API,
      data: {
        DangerCheck: {},
      },
      ListManagerTitle: "部门负责人",
      ListLeaderTitle: "分管领导",
      ListTechDirectorTitle: "工艺、设备负责人",
      platfrom: '',
    };
  },
  mounted() {
    this.code = this.$route.query.code;
    if (this.code) {
      this.GetDetailByCode();
    }
    var self = this;
    if (process.env.VUE_APP_PLANTFORM && process.env.VUE_APP_PLANTFORM == "SYST") {
      this.platfrom = process.env.VUE_APP_PLANTFORM;
      self.ListManagerTitle= "一级负责人",
      self.ListLeaderTitle= "二级负责人",
      self.ListTechDirectorTitle= "三级负责人"
    }
    // this.getEcharts()
  },
  methods: {
    getEcharts() {
      const echarts = require("echarts");
      console.log(echarts, "echarts");
      const myChart = echarts.init(document.getElementById("echarts1"));
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            // name: '库存情况',
            type: "pie",
            radius: "68%",
            center: ["50%", "50%"],
            clockwise: false,
            data: [
              {
                value: 45,
                name: "CARD",
              },
              {
                value: 55,
                name: "FLASH",
              },
            ],
            label: {
              normal: {
                textStyle: {
                  color: "#999",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: "#ffffff",
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        color: ["red", "green"],
        backgroundColor: "#fff",
      };
      myChart.setOption(option, true);
    },
    // 详情
    GetDetailByCode() {
      let _this = this;
      _this.$axios
      .get("/RiskUnit/GetDetailByCode",{params:{code: _this.code}})
      .then((res)=>{
        res.data.EditDate = getDate(res.data.EditDate);
          res.data.ListCheckRecord.forEach((item) => {
            if (item.CheckNames) {
              var index = item.CheckNames.indexOf(",");
              if (index > 0) {
                item.CheckNames = item.CheckNames.substring(0, index) + "···";
              }
            }
          });
          _this.data = res.data;
      })
      .catch((err) => {
        console.log("err", err);
      });
    },
    // 二维码
    goQRCode() {
      this.$router.push("/Site_RiskUnit/QRCode");
    },
    // 员工信息
    goStaffInfo(item) {
      this.$router.push("/Site_RiskUnit/StaffInfo?userName=" + item.ID);
    },
    // 风险位置隐患排查任务
    goInspectRecord() {
      this.$router.push({
        path: "/Site_RiskUnit/CheckAreaTaskPage",
        query: {
          areaCode: this.data.AreaCode,
          areaType: this.data.AreaType,
        },
      });
    },
    // 检查表
    goDangerTemplate() {
      this.$router.push({
        path: "/Site_RiskUnit/RiskUnitTemplate",
        query: {
          areaCode: this.data.AreaCode,
          areaName: this.data.AreaName,
          areaType: this.data.AreaType,
          areaNo: this.data.AreaNo,
          ruCode: this.data.RUCode,
        },
      });
    },
    goDangerPhoto() {
      this.$router.push({
        path: "/Danger/DangerCheckTaskDetailEdit",
        query: {
          areaCode: this.data.AreaCode,
          areaName: this.data.AreaName,
          areaType: this.data.AreaType,
          areaNo: this.data.AreaNo,
        },
      });
    },
    goPlanSiteDisposalPlan(attachCode) {
      this.$router.push({
        path: "/Plan/PlanSiteDisposalPlanView",
        query: {
          code: attachCode,
        },
      });
    },
    goAreaDetailPageData(dataType, ctCode) {
      this.$router.push({
        path: "/Site_RiskUnit/CheckAreaDetailPage",
        query: {
          areaCode: this.data.AreaCode,
          dataType: dataType,
          ctCode: ctCode,
          areaType: this.data.AreaType,
        },
      });
    },

    goAreaPlanTaskPage() {
      this.$router.push({
        path: "/Site_RiskUnit/CheckAreaPlanTaskPage",
        query: {
          areaCode: this.data.AreaCode,
          areaType: this.data.AreaType,
        },
      });
    },
    // 文件页面
    goFile(attachCode) {
      let _this = this;
      if (attachCode.startsWith("GZK")) {
        _this.$axios
        .get("/RiskNotifyCard/GetDetailByCode",{params:{rpCode: attachCode,}})
        .then((res)=>{
          _this.preview(res.data.Attachs);
        })
      } else {
        _this.$axios
        .get("/RiskPointIdentify/GetDetailFile",{params:{rpCode: attachCode,}})
        .then((res)=>{
          _this.$router.push({
            path: "/Common/PdfView",
            query: {
              url: res.data,
            },
          });
        })
      }
    },
    goAttach(attachCode) {
      this.$router.push({
        path: "/Attach/AatachDetail",
        query: {
          attCode: attachCode,
        },
      });
    },
    goEquDetail(item) {
      this.$router.push("/Equipment/Detail?equipmentCode=" + item.ID);
    },
    goChemDetail(item) {
      this.$router.push("/Chemical/Detail?ChemCode=" + item.ID);
    },
    getRiskLeveText(value) {
      var cls = "暂无";
      switch (value) {
        case "A/1级":
          cls = "重大风险";
          break;
        case "B/2级":
          cls = "较大风险";
          break;
        case "C/3级":
          cls = "一般风险";
          break;
        case "D/4级":
          cls = "低风险";
          break;
        case "E/5级":
          cls = "稍有危险";
          break;
        default:
          break;
      }
      return cls;
    },
    preview(item, index) {
      if (item) {
        let imgs = item.split(";");
        let arry = [];
        imgs.map((item, index) => {
          arry.push(this.baseUrl + item);
        });
        ImagePreview({
          images: arry,
          startPosition: index || 0,
        });
      }
    },
    afterRead(file) {
      var me = this;
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      upload(params)
        .then((res) => {
          res.data.forEach((item) => {
            me.$router.push({
              name: "DangerCheckTaskDetailEdit",
              query: {
                originType: 3,
                areaName: this.data.AreaName,
                areaType: this.data.AreaType,
                areaCode: this.data.AreaCode,
                areaNo: this.data.AreaNo,
              },
              params: {
                file: item.FilePath,
              },
            });
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="less">
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  font-size: 14px;
}
.main {
  height: 100%;
  font-size: 14px;
  color: #333;
}

.det_top_box {
  padding: 10px;
  background-color: #e8f1f8;
  // position: fixed;
  // top:43px;
  z-index: 99;
  width: 100%;
  font-size: 14px;
  height: 224px;
}

.detail_header {
  color: #ffffff;
  background: url("../../../assets/Images/AppIcon/image_riskunit_detail_bg.png");
  background-size: cover;
  padding: 10px;
  border-radius: 5px;
  font-size: 12px;
  /*background-color: #fff;*/

  .det_top {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    .dep_top_img {
      height: 18px;
      width: 18px;
    }
  }

  .det_name {
    font-size: 20px;
    margin-top: 20px;
    text-align: center;
  }

  .det_location {
    text-align: center;
    margin-top: 10px;
  }

  .det_accident_div {
    margin-top: 15px;
    margin-bottom: 15px;
    .det_accident {
      text-align: center;
      background: #6f8edc;
      color: #fff;
      padding: 2px 10px;
      border-radius: 10px;
    }
  }
}

.det_tab {
  font-size: 12px;
  padding: 5px 10px;
  .det_tab_item {
    /*margin: 10px;*/
    padding: 10px 0;
    background-color: #fff;
    border-radius: 5px;

    .det_tab_item_text {
      padding: 0 10px;
    }
  }
}

.text_box {
  padding: 10px;
  border-radius: 5px;
  background-color: #f2f6fa;
  margin-bottom: 10px;

  .text_top {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .top_link {
      color: #1989fa;
    }
  }

  .text_item {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;

    .item_link {
      color: #1989fa;
    }
  }

  .text_img {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    .img_item {
      width: 33.3%;
      text-align: center;

      img {
        height: 25px;
        width: 25px;
        margin-bottom: 10px;
      }
    }
  }

  .text_history {
    display: flex;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .text_member {
    color: #1989fa;
    margin-bottom: 10px;
  }

  .text_total_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      .img_item_top {
        display: flex;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
  .text_record_list {
    .list_row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      > div {
        width: 33.3%;
      }
      .row_center {
        text-align: center;
      }
      .row_right {
        text-align: right;
      }
    }
  }
}
.riskLevel {
  .riskLevelnone {
    background: green;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 1px 3px;
  }
  .riskLevel1 {
    background: #ff0000;
  }
  .riskLevel2 {
    background: #ffc000;
  }
  .riskLevel3 {
    background: #ffff00;
    color: #666;
  }
  .riskLevel5 {
    background: #00b0f0;
  }
}
.user-imgs {
  width: 15px;
  height: 15px;
  vertical-align: bottom;
  position: absolute;
}
.user-name {
  display: inline-block;
  width: 100%;
  margin-left: 17px;
}
.tab-item-r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;

  .look-detail {
    font-size: 13px;
    color: #1989fa;
  }
}
.none {
  font-size: 12px;
  color: #999;
}
.risk-unit-name {
  img {
    width: 14px;
    height: 15px;
    vertical-align: middle;
    margin-right: 10px;
  }
  font-size: 13px;
  color: #1989fa;
}
.fenxian {
  background-color: #f2f6fa;
  padding: 10px;
  font-size: 14px;
  border-radius: 5px;
}
.RiskPointName {
  font-size: 12px;
}
.att-name {
  color: #1989fa;
  line-height: 32px;
}
img {
  width: 14px;
  height: 16px;
  vertical-align: middle;
  margin-right: 5px;
}
.att-name-btns {
  display: flex;
  align-items: center;
}
</style>
